<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>优惠券</title>
<link type="text/css" rel="stylesheet" href="css/aui/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/aui/coupon.css">
<script type="text/javascript" src="js/aui/jquery-2.1.4.min.js" ></script>
<!-- <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js" ></script> -->
<style>
	*{text-decoration: none;margin: 0;padding: 0;list-style: none;}
		#hear{width: 100%;height: 44px;line-height: 45px;border-bottom: 1px solid #cccccc; }
		#hear a{font-weight: normal;color: black;}
		#hear li{text-align: center;float: left;height: 45px;}
		#hear li:nth-of-type(1){width: 33%;float: left;}
		#hear li:nth-of-type(2){width: 33%;float: left;}
		#hear li:nth-of-type(3){width: 34%;float: right;}
		#contentop li{ width: 90%; display: none;text-align: center;margin: 0 auto;margin-top: 12px;}
		#contentop .action{ display: block;}
		#contentop .usl{width: 100%;height: 110px;background:wheat;border: 1px solid #cccccc;margin-bottom: 10px;text-shadow: none;}			
		#contentop .alo{width: 100%;height: 120px;background: white;border: 1px solid #cccccc;margin-bottom: 10px;text-shadow: none;}
		#contentop span{font-size: 1.3em;color: #47B0D7;}
		#contentop .sty1{margin-top: 18px;}
		#contentop .sty2{margin-top: 0px;}
		#contentop .sty3{margin-top: 5px;}
		#contentop .sty4{text-align: right;font-size: 0.8em;margin-top: -20px;}
		#contentop .Buy{font-size: 0.8em;margin-top: 5px;}
		#contentop .Buy div:nth-of-type(1){text-align: left;padding-left: 4%;}
		#contentop .Buy div:nth-of-type(2){float: right;}
		#contentop .cllio {background:url(img/20010.png)repeat-x;width: 93%;height:8px;margin: 0 auto;margin-top: 5px;}
</style>
<script>
		$(function(){
			$("#hear li").click(function(){
				$(this).css({
					borderBottom: "2px solid #039be5",
					height:"43px"
				}).siblings().css({
					borderBottom: "none",
					height:"45px"
				});
			});					
				
			$("#hear li").click(function(){
				$(this).addClass("action").siblings().removeClass("action");
				var index = $(this).index();
				$("#contentop li").eq(index).css("display","block").siblings().css("display","none");
			});
		});
</script>
</head>
<body>
    <header class="aui-bar aui-bar-nav" style="color: #CCC;border-bottom: 1px solid;" >
	    <a href="person.html" class="aui-pull-left">
		    <span class="aui-iconfont aui-icon-left"></span>
	    </a>
	    <div class="aui-title" style="color: #121;">优惠券</div>
    </header>
    <div data-role="page">
    <div data-role = "content-floud">
	    <div style="font-family: '微软雅黑';">
		    <ul id="hear">
			    <li class="action" style="border-bottom: 2px solid #039be5;height: 43px;"><a href="#">未使用<span style="color: red;">(0)</span></a></li>
			    <li><a href="#" >已使用<span style="color: red;">(8)</span></a></li>
			    <li><a href="#" >已过期<span style="color: red;">(2)</span></a></li>
		    </ul>
		    <ul id="contentop">
			    <li class="action">
				    <div class="alo">
					    <div class="ui-grid-a sty3" >
						    <div class="ui-block-a">优惠券</div>
						    <div class="ui-block-b">仅可购买部分商品</div>
					    </div>
					    <div class="ui-grid-a sty2" >
						    <div class="ui-block-a "><span>￥50.00</span></div>
						    <div class="ui-block-b"></div>
					    </div>
					    <div class="cllio"></div>
					    <div class="ui-grid-a Buy" >
						    <div class="ui-block-a">兑换码：0001</div>
						    <div class="ui-block-a">2016.02.01-2016.08.25</div>
					    </div>
				    </div>
				    <div class="alo">
					    <div class="ui-grid-a sty3" >
						    <div class="ui-block-a">优惠券</div>
						    <div class="ui-block-b">仅可购买部分商品</div>
					    </div>
					    <div class="ui-grid-a sty2" >
						    <div class="ui-block-a "><span>￥30.00</span></div>
						    <div class="ui-block-b">满99元可用</div>
					    </div>
					    <div class="cllio"></div>
					    <p class="sty5" style="margin-top: 3px;">2016.02.01-2016.08.25&nbsp;&nbsp;&nbsp;&nbsp;</p>
				    </div>
			    </li>
				<li>
			        <div class="alo">
						<div class="ui-grid-a sty3" >
							<div class="ui-block-a">优惠券</div>
							<div class="ui-block-b">仅可购买部分商品</div>
						</div>
					    <div class="ui-grid-a sty2" >
						    <div class="ui-block-a "><span>￥50.00</span></div>
						    <div class="ui-block-b"></div>
					    </div>
					    <div class="cllio"></div>
					    <p class="sty5">2016.02.01-2016.08.25&nbsp;&nbsp;&nbsp;&nbsp;</p>
				    </div>
			    </li>
			    <li>
				    <div class="usl">
					    <div class="ui-grid-a sty3" >
						    <div class="ui-block-a">优惠券</div>
						    <div class="ui-block-b">仅可购买部分商品</div>
					    </div>
					    <div class="ui-grid-a sty2" >
						    <div class="ui-block-a "><span>￥50.00</span></div>
						    <div class="ui-block-b"></div>
					    </div>
					    <div class="cllio"></div>
					    <p class="sty5">2016.02.01-2016.08.25&nbsp;&nbsp;&nbsp;&nbsp;</p>
			        </div>
				</li>
		    </ul>
	    </div>
    </div>
    </div>
</body>
</html>

